<template>
  <div class="container">
    <div class="orderBorder">
      <!--左侧列表-->
      <div class="order-left">
        <dl>
          <dt><i>·</i> 订单中心</dt>
          <dd>我的全部订单</dd>
          <dd>已完成订单</dd>
          <dd>进行中订单</dd>
        </dl>
        <dl>
          <dt><i>·</i> 关注中心</dt>
          <dd>关注的医院 </dd>
          <dd>收藏的轮椅</dd>
          <dd>浏览历史</dd>
        </dl>
        <dl>
          <dt><i>·</i> 客户服务</dt>
          <dd>意见建议 </dd>
          <dd>购买咨询 </dd>
          <dd>交易纠纷 </dd>
          <dd>我的发票</dd>
        </dl>
      </div>
      <!-- 右侧内容 -->
      <div class="order-right">
        <!--订单内容-->
        <div class="chosetype" v-show="orders.length !== 0">
          <table>
            <thead>
            <tr>
              <th class="topName1">订单详情</th>
              <th class="topName2">所属医院</th>
              <th class="topName3">金额</th>
              <th class="topName3">状态</th>
              <th class="topName3">操作</th>
            </tr>
            </thead>
          </table>
        </div>
        <!--订单-->
        <div class="orders" v-for="order in orders">
          <table class="order-item">
            <thead>
            <tr>
              <th colspan="5">
                <span>订单开始时间：{{order.orderTime}}</span>
                <span v-if="order.status === '完成'">订单结束时间：{{order.endTime}}</span>
                <span class="pull-right"><img src="../images/delete.png"></span>
              </th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td class="orderName1 typographic">
                <img src="../images/goods.png" alt="">
                <a href="javascript:void(0);">{{order.wheelchairFuction}}</a>
              </td>
              <td rowspan="2" class="orderName2">{{order.hospitalName}}</td>
              <td rowspan="2" class="orderName3">
                <ul v-if="order.status === '完成' ">
                  <li>总金额¥{{order.amount}}</li>
                  <li>租用时长:{{order.total}}</li>
                </ul>
                <ul v-if="order.status === '使用中' ">
                  <li>---</li>
                </ul>
              </td>
              <td rowspan="2" class="orderName3">{{order.status}}</td>
              <td rowspan="2" class="orderName3">
                <ul>
                  <li>
                    <a href="javascript:void(0);" v-if="order.status === '完成' ">评价|晒单</a>
                    <a href="javascript:void(0);" v-if="order.status === '使用中' " @click="returnWheelchair(order.id)">归还轮椅</a>
                  </li>
                </ul>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {reqReturnOrder} from "../../api";

export default {
  name: 'myOrder',
  data(){
    return{
    }
  },
  mounted() {
    this.getData()
  },
  computed:{
    orders(){
      return this.$store.state.home.userOrder
    }
  },
  methods:{
    getData(){
      let userId = localStorage.getItem("USERTOKEN")
      this.$store.dispatch('getUserOrders',{userId})
    },
    //归还轮椅
    returnWheelchair(id){
      this.$confirm(' 是否归还轮椅?', '订单消息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let status = "完成"
        await this.$store.dispatch('returnStatus',{id,status})
        this.Money(id)
        this.$message({
          type: 'success',
          message: this.$store.state.home.addOrderCode.data
        });
      }).catch(() => {
        this.$message.error('下单失败')
      });
    },
    async Money(id){
      let result =  await reqReturnOrder({id:id})
      if (result.code === 1){
        this.getData()
      }
    }
  }
}
</script>

<style scoped>
a{
  text-decoration-line: none;
  color: #666;
}

.container {
  width: 100vw;
  display: flex;
}
.orderBorder{
  width: 81vw;
  margin: auto;
  min-height: 70vh;
}
.order-left {
  float: left;
  width: 15vw;
}
.order-left dl {
  display: flex;
  flex-flow: column;
  font-size: 1vw;
}
.order-left dt {
  font-weight: 600;
}
.order-left i {
  color: #77b72c;
}
.order-left dd {
  margin: 0.8vh 0 ;
  border-bottom: 1px solid #ededed;
  text-align: center;
  color: #666;
  font-size: 1vw;
}

.order-right {
  float: right;
  width: 65vw;
}
.chosetype {
  margin-bottom: 1.5vh;
  color: #666;
}
.chosetype table {
  border: 1px solid #e6e6e6;
  border-collapse: separate;
  border-radius: 2px;
  width: 65vw;
  border-spacing: 0;
}
.chosetype tr{
  display: flex;
  align-items: center;
}

/*设置表每格所占比例*/
.topName1{
  flex-grow: 4;
}
.topName2{
  flex-grow: 2;
}
.topName3{
  flex-grow: 1;
}

.chosetype table th {
  padding: 1vh 0;
  color: #666;
  font-weight: 700;
  vertical-align: bottom;
  background-color: #f4f4f4;
  /*line-height: 3vh;*/
  border-bottom: 1px solid #e6e6e6;
  font-size: 0.8vw;
  text-align: center;
}
.orders a:hover {
  color: #4cb9fc;
}
.orders table {
  border: 1px solid #e6e6e6;
  border-collapse: collapse;
  border-radius: 2px;
  width: 65vw;
  margin-bottom: 3vh;
}
.orders th {
  width: 65vw;
  /*line-height: 3vh;*/
  text-align: left;
  vertical-align: bottom;
  background-color: #f4f4f4;
  font-size: 0.8vw;
  color: #666;
  display: flex;
  justify-content: space-between;
}

.pull-right img {
  margin-right: 2vw;
  vertical-align: middle;
  cursor: pointer;

}
.orders tr{
  display: flex;
  align-items: center;
}
.orders td {
  font-size: 0.8vw;
  color: #666;
  text-align: center;
}

.orderName1{
  width: 27vw;
}
.orderName2{
  width: 15vw;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.orderName3{
  width: 7.65vw;
}


.typographic{
  display: flex;
  align-items: center;
}
.typographic img {
  margin: auto;
}
.typographic a {
  margin: auto;
  min-width: 8vw;
  max-width: 20vw;
  overflow: hidden;
  text-overflow: ellipsis;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>
